doctype html
html
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='description', content='株式会社DIW(ディアイダブリュ)、日本のいいものを探し、世界中の人に使ってもらいたい。国際貿易、wechat宣伝、wechat広告、インバウンド事業、メディア事業、日本商品代理販売、wechat代行運営などをおこなっています')
    meta(name='keywords', content='DIW、国際貿易、wechat宣伝、wechat広告、wechat代行運営、インバウンド、中国貿易、爆買い、中国向け、中国市場、中国広告、越境ec、中国マーケティング')
    meta(name='viewport', content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no')
    title 株式会社DIW - お問い合わせ
    // Set render engine for 360 browser 
    meta(name='renderer', content='webkit')
    // No Baidu Siteapp
    meta(http-equiv='Cache-Control', content='no-siteapp')
    link(rel='icon', type='image/png', href='/i/favicon.png')
    // Add to homescreen 
    link(rel='manifest', href='manifest.json')
    // Fallback to homescreen for Chrome <39 on Android 
    meta(name='mobile-web-app-capable', content='yes')
    meta(name='application-name', content='株式会社DIW')
    link(rel='icon', sizes='192x192', href='/i/touch/chrome-touch-icon-192x192.png')
    // Add to homescreen for Safari on iOS 
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name='apple-mobile-web-app-status-bar-style', content='black')
    meta(name='apple-mobile-web-app-title', content='株式会社DIW')
    link(rel='apple-touch-icon', href='/i/touch/apple-touch-icon.png')
    // Tile icon for Win8 (144x144 + tile color) 
    meta(name='msapplication-TileImage', content='/i/touch/ms-touch-icon-144x144-precomposed.png')
    meta(name='msapplication-TileColor', content='#0e90d2')
    // SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones 
    //      
        <link rel="canonical" href="http://www.example.com/">

    link(href="/styles/site.min.css", rel="stylesheet")
  body
    header.am-topbar(data-am-sticky='')
      h1.am-topbar-brand
        a(href='/') DIW
      button.am-topbar-btn.am-topbar-toggle.am-btn.am-btn-sm.am-btn-primary.am-show-sm-only(data-am-collapse='{target: "#doc-topbar-collapse"}')
        span.am-sr-only 导航切换
        span.am-icon-bars
      .am-collapse.am-topbar-collapse#doc-topbar-collapse
        ul.am-nav.am-nav-pills.am-topbar-nav
          li
            a(href='/index')
              | トップ
              span.am-text-xs.am-text-primary - Top
          li
            a(href='/about')
              | Diwについて
              span.am-text-xs.am-text-primary - About
          li
            a(href='/service')
              | サービス一覧
              span.am-text-xs.am-text-primary - Service
          li
            a(href='/company')
              | 企業情報
              span.am-text-xs.am-text-primary - Company
          li
            a(href='/contact')
              | お問い合わせ
              span.am-text-xs.am-text-primary - Contact
    main
      h2.diw-section-title.am-text-center.am-text-xl Contact
      section.diw-section.diw-contact-section
        .am-container
          .am-g
            .am-u-md-6.am-u-md-centered
              form.diw-contact-form.am-form(action='/sendEmail', method='post')
                fieldset
                  .diw-contact-item-name.am-form-group
                    label(for='contact-ipt-name') お名前
                    input.am-form-field#contact-ipt-name(type='text', name='contactName', placeholder='例：山本　太郎')
                  .diw-contact-item-company.am-form-group
                    label(for='contact-ipt-company') 貴社名
                    input.am-form-field#contact-ipt-company(type='text', name='contactCompany', placeholder='例：株式会社　D I W')
                  .diw-contact-item-email.am-form-group
                    label(for='contact-ipt-email') メールアドレス
                    input.am-form-field#contact-ipt-email(type='email', name='contactEmail', placeholder='例：Yamamoto@diw-612.com')
                  .diw-contact-item-msg.am-form-group
                    label(for='contact-ipt-msg') お問い合わせ内容
                    textarea.am-form-field#contact-ipt-msg(name='contactMsg', rows='5', placeholder='')
                  input.am-btn.am-btn-primary.am-btn-block(type='submit', value='送信')
      .am-modal.am-modal-no-btn#sent-success-model(tabindex='-1')
        .am-modal-dialog
          .am-modal-hd
            | ありがとうございます！
            a.am-close.am-close-spin(href='javascript: void(0)', data-am-modal-close='') ×
          .am-modal-bd お問い合わせを送信しました。
      .am-modal.am-modal-no-btn#sent-fail-model(tabindex='-1')
        .am-modal-dialog
          .am-modal-hd
            | 入力内容に不備があります
            a.am-close.am-close-spin(href='javascript: void(0)', data-am-modal-close='') ×
          .am-modal-bd 確認してもう一度「送信内容を確認する」ボタンを押してください。
    footer.diw-footer
      .am-container
        .am-g
          section.am-u-md-5.am-u-md-offset-1
            h3 本社
            ul
              li 〒170-0013
              li 東京都豊島区東池袋1-36-7アルテール池袋612室
              li.diw-footer-tel Tel:03-6914-0310
              li.diw-footer-tel Fax:03-6914-0311
          section.am-u-md-5
            h3 物流センター
            ul
              li 〒33-0021
              li 埼玉県川口西川口4-3-2
              li.diw-footer-tel Tel:048-212-7016
              li.diw-footer-tel Fax:048-212-7016
    .diw-footer-bottom
      .am-container.am-text-center © Diw Co.,Ltd. All Rights Reserved.
    script(src='/js/jquery.min.js')
    script(src='/js/amazeui.min.js')
    script(src='/js/main.js')
    script.
      $(function() {
        $('.diw-section .am-container').scrollspy({
          animation: 'slide-bottom',
          delay: 100,
          repeat: false
        });

        var name = $('.diw-contact-item-name');
        var company = $('.diw-contact-item-company');
        var email = $('.diw-contact-item-email');
        var msg = $('.diw-contact-item-msg');
    
        $('.diw-contact-form').on('submit', function(e) {
          e.preventDefault();
    
          var hasError = false;
          if (name.find('input').val().trim().length === 0) {
            name.addClass('am-form-error am-form-icon am-form-feedback');
            hasError = true;
          }
          if (company.find('input').val().trim().length === 0) {
            company.addClass('am-form-error am-form-icon am-form-feedback');
            hasError = true;
          }
          // 邮箱合法性校验
          if (!email.find('input').val().trim().match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
            email.addClass('am-form-error am-form-icon am-form-feedback');
            hasError = true;
          }
          if (msg.find('textarea').val().trim().length < 10) {
            msg.addClass('am-form-error am-form-icon am-form-feedback');
            hasError = true;
          }
          if (!hasError) {
            $('.diw-contact-form').find('input[type="submit"]').addClass('am-disabled');
    
            var params = $(this).serialize();
            $.post('/sendEmail', params, function(data) {
              // 提示
              if (data.success) {
                $('#sent-success-model').modal();
              } else {
                $('#sent-fail-model').modal();
                $('.diw-contact-form').find('input[type="submit"]').removeClass('am-disabled');
              }
            }).fail(function() {
              // 提示
              $('#sent-fail-model').modal();
            });
          }
        });
    
        $('.diw-contact-item-name, .diw-contact-item-company, .diw-contact-item-email, .diw-contact-item-msg').find('input, textarea').on('focus', function (e) {
          $(this).parent().removeClass('am-form-error');
        });
      });
    // Built with love using Web Starter Kit 
